<!--
 * @Description:
 * @Author: FangYaoTang
 * @Date: 2023-08-16 09:17:56
 * @LastEditor: FangYaoTang
 * @LastEditTime: 2023-08-19 14:56:20
 * @Copyright: by 南京桓羽信息科技有限公司 禁止任何形式（包含二次开发）转售系统源码，违者必究。
-->

<template>
  <view class="page_content">
    <view class="head_content">
      <CustomNavbar :left="0" title="Record"></CustomNavbar>
      <view class="tabs_box">
        <u-tabs
          :scrollable="false"
          :lineWidth="0"
          :list="contentList"
          :current="contentCurrent"
          :activeStyle="tabsActiveStyle"
          :inactiveStyle="tabsInactiveStyle"
          lineColor="#EE7F33"
          @change="tabsChange($event, 1)"
        />
      </view>
    </view>
    <view class="main_content" v-if="contentList && contentList.length">
      <swiper
        style="height: 100%"
        :skip-hidden-item-layout="true"
        :current="contentCurrent"
        @change="changeContent($event, 2)"
      >
        <swiper-item style="height: 100%" v-for="(item, index) in contentList" :key="item.id">
          <scroll-view
            style="height: 100%"
            :scroll-y="true"
            :refresher-enabled="true"
            :refresher-threshold="100"
            :refresher-triggered="refreshStatus"
            @refresherrefresh="refreshHandle"
            @scrolltolower="bottomHandle"
            @scroll="scrollHandle"
          >
            <view class="content_box">
              <view class="list">
                <view
                  class="item"
                  v-for="(lItem, lIndex) in item.list"
                  :key="lIndex"
                  @click="
                    openVideoDetail(
                      lItem.vid,
                      lItem.title,
                      lItem.image,
                      lItem.description,
                      lItem.episodeId,
											lItem.viewTime
                    )
                  "
                >
                  <view class="img">
                    <image class="image" :src="lItem.image" mode="aspectFill"></image>
                  </view>
                  <view class="info">
                    <view class="title u-line-1">{{ lItem.title }}</view>
                    <!-- <view class="text1 u-line-2">{{ lItem.description }}</view> -->
                    <view class="text2">{{ lItem.episodesName }} /  total of {{ lItem.episodes }} episode </view>
										<view class="text2">Watch progress {{lItem.viewTime}}%</view>
                    <view class="btns">
                      <view
                        class="button"
                        v-if="item.id == 1"
                        :class="{ collect: lItem.favor == 1 }"
                        hover-class="active"
                        :hover-start-time="0"
                        :hover-stay-time="200"
                        @click.stop="handleCollect(lItem.vid, lItem.favor, lIndex)"
                      >
                        <u-icon
                          :name="lItem.favor == 1 ? 'star-fill' : 'star'"
                          color="#eee"
                          size="18"
                        ></u-icon>
                        <text class="text">{{ lItem.favor == 1 ? 'unfollow' : 'follow' }}</text>
                      </view>
                      <view
                        class="button"
                        v-else
                        hover-class="active"
                        :hover-start-time="0"
                        :hover-stay-time="200"
                      >
                        <u-icon name="play-right-fill" color="#eee" size="18"></u-icon>
                        <text class="text">Watch</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="nodata" v-if="!item.list.length && item.status == 'nomore'">
                <u-empty mode="data" text="No data" icon="https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/more/%E4%BD%8D%E5%9B%BE%402x%20(4).png" />
              </view>
              <view class="liststatus" v-else>
                <u-loadmore :status="item.status" :line="true" />
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <!-- <tabBar v-if="tabChange" selectedIndex =1></tabBar> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      navbarTitle: '影视视频',
      tabsActiveStyle: {
        color: getApp().globalData.isColor,
        fontSize: '32rpx',
        fontWeight: 'bold'
      },
      tabsInactiveStyle: { color: '#666666' },
      contentList: [
        {
          id: 1,
          name: 'Watch History',
          type: 'log',
          list: [],
          page: 1,
          pagesize: 10,
          status: 'loadmore'
        },
        {
          id: 2,
          name: 'Follow record',
          type: 'favorite',
          list: [],
          page: 1,
          pagesize: 10,
          status: 'loadmore'
        }
      ],
      contentCurrent: 0,
      refreshStatus: true,
      isRefresh: false,
      //tab更新
      tabChange: false,
      requestUrl:'video.getRecord', // 最近观看记录
      tabsIndex: 0
    }
  },
  onShow() {
    this.tabChange = true
		this.contentCurrent = 0
    this.requestUrl = 'video.getRecord'
    this.contentList.forEach(v=>{
      v.list = []
    })
    this.getPlayRecordList()
  },
  onHide() {
    this.tabChange = false
  },
  // onLoad() {
  //   this.getPlayRecordList()
  // },
  methods: {
    tabsChange(e){
      if(this.tabsIndex == e.index) return
      if(e.index == 0) {
        this.requestUrl = 'video.getRecord'
      }else{
        this.requestUrl = 'video.getFavorite'
      }
      this.tabsIndex = e.index
      this.contentCurrent = e.index
      this.contentList[this.contentCurrent].list = []
      this.getPlayRecordList()
    },
    // 	收藏
    handleCollect(vid, collect, index) {
      if (collect == 0) {
        const obj = {
          vid,
          type: 'favorite'
        }
        this.$request('video.addRecord', obj, false).then(res => {
          this.contentList[this.contentCurrent].list[index].favor = 1
        })
      } else {
        const obj = {
          vid,
          type: 'favorite'
        }
        this.$request('video.deleteRecord', obj, false).then(res => {
          this.contentList[this.contentCurrent].list[index].favor = 0
        })
      }
    },
    // 获取播放记录
    getPlayRecordList() {
      let status = uni.getSystemInfoSync().uniPlatform
      const obj = {
        type: this.contentList[this.contentCurrent].type,
        current: this.contentList[this.contentCurrent].page,
        pagesize: this.contentList[this.contentCurrent].pagesize,
        platform: status == 'H5' ? 2 : 1
      }
      this.contentList[this.contentCurrent].status = 'loading'
      this.$request(this.requestUrl, obj)
        .then(res => {
          if (res.data.records && res.data.records.length) {
            this.contentList[this.contentCurrent].list = this.contentList[
              this.contentCurrent
            ].list.concat(res.data.records)
            if (res.data.records.length < this.contentList[this.contentCurrent].pagesize) {
              this.contentList[this.contentCurrent].status = 'nomore'
            } else {
              this.contentList[this.contentCurrent].status = 'loadmore'
            }
          } else {
            this.contentList[this.contentCurrent].page > 1 &&
              this.contentList[this.contentCurrent].page--
            const timer = setTimeout(() => {
              this.contentList[this.contentCurrent].status = 'nomore'
              clearTimeout(timer)
            }, 500)
          }
          console.log(this.contentList, 'this.contentList')
          this.refreshStatus = false
          this.isRefresh = false
        })
        .catch(() => {
					this.contentList[this.contentCurrent].status = 'nomore'
          this.refreshStatus = false
          this.isRefresh = false
        })
    },
    // 下拉刷新
    refreshHandle() {
      this.refreshStatus = true
      if (!this.isRefresh) {
        this.isRefresh = true
        this.contentList[this.contentCurrent].page = 1
        this.contentList[this.contentCurrent].list = []
        this.getPlayRecordList()
      }
    },
    // 滚动监听
    scrollHandle(e) {},
    // 触底滚动
    bottomHandle() {
      this.contentList[this.contentCurrent].page++
      this.getPlayRecordList()
    },
    // 切换分类
    changeContent(e, i) {
      const current = i === 1 ? e.index : e.detail.current
      if (current == this.contentCurrent) return
      this.contentCurrent = current
      !this.contentList[this.contentCurrent].list.length && this.getPlayRecordList()
    }
  }
}
</script>

<style lang="scss" scoped>
.page_content {
  overflow: hidden;

  .head_content {
    .tabs_box {
      padding: 0 100rpx;
    }
  }

  .main_content {
    overflow: hidden;

    .content_box {
      padding: 20rpx 40rpx 60rpx 40rpx;

      .list {
        .item {
          margin-bottom: 40rpx;
          display: flex;
          align-items: center;

          .img {
            width: 206rpx;
            height: 276rpx;
            border-radius: 20rpx;
            overflow: hidden;

            .image {
              width: 100%;
              height: 100%;
            }
          }

          .info {
            flex: 1;
            margin-left: 40rpx;

            .title {
              font-size: 32rpx;
              color: white;
              font-weight: 700;
							line-height: 2;
            }

            .text1 {
              height: 68rpx;
              font-size: 24rpx;
              color: #999999;
              margin-top: 4rpx;
              line-height: 34rpx;
              margin: 10rpx 0;
            }

            .text2 {
              font-size: 24rpx;
              color: #999999;
              line-height: 2;
            }

            .btns {
              margin-top: 20rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .button {
                width: calc((100% - 30rpx) / 2);
                height: 60rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 28rpx;
                background: #484b52;
                border-radius: 10rpx;
                color: #fff;

                &.collect {
                  opacity: 0.6;
                }

                &.active {
                  background: rgba(#000, 0.9);
                }

                .text {
                  margin-left: 8rpx;
                }
              }
            }
          }
        }
      }

      .nodata {
        padding: 15vh 0;
      }
    }
  }
}
</style>
